<!-- 艺人-订单详情 -->
<template>
	<view class="orderDetails">

		<!-- 头像等信息 -->
		<view class="head">

			<image class="head-img" :src="pageData.headImg" mode="aspectFill"></image>

			<view class="head-right">
				<view class="head-right-top">
					<text class="head-right-top-text">{{pageData.name | blank}}</text>

					<view class="head-right-top-address">
						<uni-icons type="location-filled" size="22rpx" color="#EC606F"></uni-icons>
						<text>{{pageData.cityName | blank}}</text>
					</view>
				</view>
				<view class="head-right-text">
					{{pageData.remark | blank}}
				</view>
			</view>

		</view>

		<!-- 服务时间 -->
		<view class="time card">

			<view class="card-item">
				<view class="card-item-left">
					<text class="title">服务开始时间</text>
					<text class="text">{{startTimeShow}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

			<view class="card-item">
				<view class="card-item-left">
					<text class="title">服务结束时间</text>
					<text class="text">{{endTimeShow}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

		</view>

		<!-- 预约时间等信息 -->
		<view class="timeDetails card">

			<view class="card-item">
				<view class="card-item-left">
					<view class="title">
						<text>预约开始日期</text>
					</view>
					<text class="text">{{pageData.startTime | blank}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

			<view class="card-item">
				<view class="card-item-left">
					<text class="title">预约时长</text>
					<text class="text">{{pageData.duration+pageData.unit}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

			<view class="card-item">
				<view class="card-item-left">
					<text class="title">预约项目</text>
					<text class="text">{{pageData.categoryName | blank}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

		</view>

		<!-- 地址等信息 -->
		<view class="address card">

			<view class="card-item">
				<view class="card-item-left">
					<text class="title">称呼</text>
					<text class="text">{{pageData.userName | blank}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

			<view class="card-item">
				<view class="card-item-left">
					<text class="title">预约城市</text>
					<text class="text">{{pageData.cityName | blank}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

			<view class="card-item address">
				<view class="card-item-left">
					<text class="title">见面地址</text>
					<text class="text address-1">{{pageData.address | blank}}</text>
				</view>
				<uni-icons type="forward" size="30rpx" color="#3E3D3D"></uni-icons>
			</view>

		</view>

		<!-- 费用汇总 -->
		<view class="money card">
			<text class="money-title">订单明细</text>

			<view class="money-item">
				<text class="money-item-left">出行费用</text>
				<text class="money-item-right">￥{{pageData.travelExpense}}</text>
			</view>

			<view class="money-item">
				<text class="money-item-left">服务费用</text>
				<text class="money-item-right">￥{{pageData.serviceAmount}}</text>
			</view>
			<view class="money-item-coupon">
				<text class="money-item-coupon-left">优惠券</text>

				<view class="money-item-coupon-rightBox">
					<view class="money-item-coupon-rightBox-name">
						{{pageData.couponName ? pageData.couponName : '未使用优惠券'}}
					</view>
					<text class="money-item-coupon-rightBox-money">-￥{{pageData.discountAmount}}</text>
				</view>
			</view>

			<view class="money-item money-money">
				<text class="money-item-left">合计</text>
				<text class="money-item-right-money">￥{{pageData.money}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	//请求api
	import {
		postArtistDetailApi, // 艺人详情
	} from '@/api/artistCentre.js'

	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				pageData: {}, // 页面数据
			};
		},
		computed: {
			...mapState({
				orderItemData: state => state.home.orderItemData
			}),

			/**
			 * 服务开始时间
			 */
			startTimeShow() {
				let str = ''
				if (this.pageData.serviceStartTime === null) {
					str = '服务未开始'
				} else {
					str = this.pageData.serviceStartTime
				}
				return str;
			},
			/**
			 * 服务结束时间
			 */
			endTimeShow() {
				let str = ''
				if (this.pageData.serviceStartTime === null) {
					str = '服务未开始'
				} else if (this.pageData.serviceEndTime === null) {
					str = '服务进行中'
				} else {
					str = this.pageData.serviceEndTime
				}

				return str;

			}

		},
		onShow() {
			this.init()
		},
		filters: {
			blank(val) {
				if (val === null || val === undefined || val === '') {
					return '暂无数据'
				} else {
					return val;
				}
			}
		},
		methods: {

			init() {
				// 初始化页面数据
				this.setPageDataInit(this.orderItemData)



				//获取艺人详情
				this.postArtistDetail({
					id: this.pageData.id,
					pageNum: 1,
					pageSize: 20
				})


			},
			/**
			 * 获取艺人详情
			 */
			async postArtistDetail(params) {
				const res = await postArtistDetailApi(params);
				if (res.code === 200) {
					this.pageData.remark = res.data.signature
				}
			},


			/**
			 * 初始化页面数据
			 */
			setPageDataInit(val) {
				this.pageData = {
					id: val.artistId, // 艺人id
					headImg: val.coverUrl, // 头像
					name: val.stageName, // 艺人名字
					remark: '', // 备注

					serviceStartTime: val.serviceStartTime, // 服务开始时间
					serviceEndTime: val.serviceEndTime, // 服务结束时间



					startTime: val.subscribeStartTime, // 预约开始时间
					endTime: val.subscribeEndTime, // 预约结束时间
					duration: val.duration, // 预约时长
					unit: val.unit, // 预约的单位
					categoryName: val.categoryName, // 服务的项目


					userName: val.salutation, // 称呼
					cityName: val.cityName, // 预约城市
					address: val.address, // 预约地址

					travelExpense: val.travelExpense, // 出行费
					serviceAmount: val.serviceAmount, // 服务费用
					couponName: val.couponName, //优惠券名
					discountAmount: val.discountAmount, // 优惠费用
					money: val.payAmount, // 支付金额

					data: val // 原始数据
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.orderDetails {
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(202, 191, 192, 0) 100%);
		#padding(32rpx 32rpx 36rpx 32rpx);

		// 头像等信息
		.head {
			#flex(-, start, center);

			.head-img {
				#box(160rpx, 160rpx, 16rpx);
				margin-right: 32rpx;
			}

			.head-right {
				flex: 1;
				.head-right-top {
					#flex(-, start, center);

					.head-right-top-text {
						#font(28rpx, #0f0d21, 700);
						margin-right: 16rpx;
					}

					.head-right-top-address {
						#flex(-, center, center);
						#font(20rpx, #ec606f);
						#box(auto, auto, 8rpx, rgba(#ec606f, .15));
						#padding(8rpx 16rpx);
						gap: 4rpx;
					}

				}

				.head-right-text {
					#font(24rpx, #8c8a8a);
					margin-top: 20rpx;
				}

			}


		}

		//公共的卡片样式
		.card {
			#box(100%, auto, 16rpx, #fff);
			#padding(0 32rpx);

			box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);
			margin-top: 32rpx;

			.card-item {
				#flex(-, space-between, center);
				#box(100%, 100rpx);

				.card-item-left {
					#flex(-, start, center);

					.title {
						#font(28rpx, #0f0d21);
						width: 210rpx;
					}

					.text {
						#font(28rpx, #8c8a8a);
					}

				}


				&:not(:last-child) {
					border-bottom: 2rpx solid rgba(#000, .1);
				}

			}

			.address {
				height: auto;

				.card-item-left {
					height: auto;

					.title {
						width: 210rpx !important;
					}

					.address-1 {
						flex: 1;
						#padding(36rpx 0);
						line-height: 42rpx;
						height: auto;
					}
				}


			}

		}

		// 服务时间
		.time {}

		//预约时间等信息
		.timeDetails {}

		//地址等信息
		.address {}

		// 费用汇总
		.money {
			#padding(24rpx 32rpx);

			.money-title {
				#font(32rpx, #0f0f0f, 700);
			}

			.money-item {
				margin-top: 40rpx;

				#flex(-, space-between, center);

				.money-item-left {
					#font(28rpx, #0f0d21);
				}

				.money-item-right {
					#font(28rpx, #cf0000, 600);
				}

				.money-item-right-money {
					#font(60rpx, #cf0000, 700);
				}
			}

			.money-item-coupon {
				margin-top: 40rpx;
				#flex(-, space-between, center);

				.money-item-coupon-left {
					#font(28rpx, #0f0d21);
				}

				.money-item-coupon-rightBox {
					#flex(-, flex-end, center);

					.money-item-coupon-rightBox-name {
						#font(22rpx, #cf0000);
						#padding(4rpx 12rpx);
						background-color: rgba(#cf0000, .1);
						border-radius: 100rpx;
						margin-right: 12rpx;
					}

					.money-item-coupon-rightBox-money {
						#font(28rpx, #cf0000, 600);
					}

				}


			}


			.money-money {
				align-items: flex-start;
			}
		}


	}
</style>